<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>
    <div style="position: absolute; left: 18px; top: 18px">
      <button>{{ message }}</button>
    </div>
  </div>
</template>

<script>
import aaa from "./scene.json";

function createEarth(comp) {
  // 1.1.1 创建地球
  var earth = new XE.Earth(comp.$refs.earthContainer);

  //加载底图和相机位置
  earth.xbsjFromJSON(aaa);

  earth.sceneTree.root.children.push({
    czmObject: {
      xbsjType: "Tileset",
      xbsjGuid: "6fb0f26c-96a1-42f4-955c-94a886d6de99",
      name: "新建人工模型服务",
      url: "http://124.70.158.145:9999/ll/tileset.json",
      maximumScreenSpaceError: 256,
      luminanceAtZenith: 5,
      imageBasedLightingFactor: [0.46, 0.05],
      xbsjPosition: [2.1019486213865366, 0.6526365319647842, 55.6311614017294],
      xbsjRotation: [0.03477149649978628, 0, 0],
      xbsjScale: [0.03, 0.03, 0.03],
      xbsjUseOriginTransform: false,
      xbsjStyle: 'var style = {\n    color: "vec4(0, 0.5, 1.0,1)"\n}',
      xbsjClippingPlanes: {},
      xbsjCustomShader: {
        fsBody:
          "\n    float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;\n    float vtxf_a12 = v_elevationPos.z / 60.0 + sin(vtxf_a11) * 0.1;\n    gl_FragColor *= vec4(vtxf_a12, vtxf_a12, vtxf_a12, 1.0);\n\n    float vtxf_a13 = fract(czm_frameNumber / 360.0);\n    float vtxf_h = clamp(v_elevationPos.z / 300.0, 0.0, 1.0);\n    vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;\n    float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));\n    gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - vtxf_diff);\n"
      }
    }
  });


  // var viewer = earth.cmz.viewer
  var viewer = earth.czm.viewer;

  comp._earth = earth;

  // 仅为调试方便用
  window.earth = earth;

  let tileset = earth.sceneTree.root.children[1].czmObject;

  console.log(tileset);

  // Cesium后处理
  // var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
  // silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
  // silhouetteBlue.uniforms.length = 0.01;
  // silhouetteBlue.selected = [];

  // var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
  // silhouetteGreen.uniforms.color = Cesium.Color.LIME;
  // silhouetteGreen.uniforms.length = 0.01;
  // silhouetteGreen.selected = [];

  // earth.czm.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen]));

  // tileset.onclick = pickedObject => {

  //   console.log(pickedObject);

  //   pickedObject.getProperty('id');
  //   pickedObject.getProperty('name');

  //   if (
  //     !silhouetteBlue.selected ||
  //     silhouetteBlue.selected[0] !== pickedObject
  //   ) {
  //     silhouetteBlue.selected = [pickedObject];
  //   }

  //   // return false; 是否禁用点选效果？
  // };

  console.log();
}

function createCesium(comp) {
  window.viewer = new Cesium.Viewer(comp.$refs.earthContainer);
}

// 1 创建Earth的vue组件
var EarthComp = {
  data() {
    return {
      message: "页面加载于 " + new Date().toLocaleString(),
      _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
      _bgImagery: undefined
    };
  },
  // 1.1 资源创建
  mounted() {
    if (typeof XE !== "undefined") {
      createEarth(this);
      let aa = 1;
      let _this = this;

    } else if (typeof Cesium !== "undefined") {
      createCesium(this);
    }
  },
  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  }
};

export default EarthComp;
</script>